<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="720px"
    :visible="visible"
    :lock-scroll="false"
    v-dialog-movable="false"
    custom-class="ele-dialog-form"
    :title="(isUpdate?'修改' : '添加') + (form.NodeType === 2 || form.AddButton ? '按钮' : '菜单')"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      :size="defaultFormSize"
      @keyup.enter.native="save"
      @submit.native.prevent>
      <el-row :gutter="15">
        <el-col :span="12" class="col-box">
          <el-form-item label="上级菜单:">
            <tree-select
              :disabled="form.AddButton || form.NodeType === 2"
              :options="menuList"
              v-model="form.ParentID"
              :defaultExpandLevel="3"
              :normalizer="normalizer"
              placeholder="请选择上级菜单"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item :label="form.AddButton || form.NodeType === 2 ? '按钮名称:' : '菜单名称:'" prop="NodeName">
            <el-input clearable v-model="form.NodeName" placeholder="请输入菜单名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item label="控制器名称:" prop="ControllerName">
            <el-input
              clearable
              v-model="form.ControllerName"
              placeholder="请输入控制器名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item label="方法名称:" prop="ActionName">
            <el-input clearable v-model="form.ActionName" placeholder="请输入方法名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item label="菜单类型:">
            <el-radio-group
              :disabled="form.AddButton || form.NodeType === 2"
              v-model="form.NodeType"
              @change="(val) => onChange(val, 'NodeType')">
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2" :disabled="!form.ParentID">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item label="是否显示:">
            <el-radio-group v-model="form.NodeShowType" @change="(val) => onChange(val, 'NodeShowType')">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box" v-if="!form.ParentID">
          <el-form-item label="菜单图标:">
            {{form.ParentID}}
            <ele-icon-picker v-model="form.NodeIcon" placeholder="请选择菜单图标" :disabled="form.NodeType===2"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="col-box">
          <el-form-item label="排序号:" prop="NodeOrder">
            <el-input-number
              :min="0"
              v-model="form.NodeOrder"
              placeholder="请输入排序号"
              controls-position="right"
              class="ele-fluid ele-text-left"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import TreeSelect from '@riophae/vue-treeselect'
  import rules from '@/config/rules/node/save-node'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import EleIconPicker from 'ele-admin/packages/ele-icon-picker'

  export default {
    name: 'save-node',
    components: {EleIconPicker, TreeSelect},
    props: {
      // 弹窗是否打开
      visible: {
        type: Boolean,
        default: false
      },
      // 修改回显的数据
      data: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 全部菜单数据
      menuList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        // 表单数据
        form: this.initFormData(this.data),
        // 表单验证规则
        rules,
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    watch: {
      data() {
        this.isUpdate = !!(this.data && this.data.NodeID);
        this.form = this.initFormData(this.data);
      }
    },
    methods: {
      /* 下拉树格式化 */
      normalizer(d) {
        return {
          id: d.NodeID,
          label: d.NodeName,
          children: d.children || undefined
        };
      },
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            if (this.form.ParentID) {
              this.form.NodeIcon = ''
            }
            let requestUrl = this.isUpdate ? '/node/update' : '/node/create';
            this.$http.post(requestUrl, this.form).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({type: 'success', message: res.data.msg});
                this.updateVisible(false);
                this.$emit('done');
                this.form = this.initFormData({});
              }
            }).catch(() => {
              this.loading = false;
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 单选框选择改变 */
      onChange(value, field) {
        this.form[field] = value
        if (field === 'NodeType') {
          this.form.NodeIcon = ''
        }

      },
      /* 初始化form数据 */
      initFormData(data) {
        let form = {
          NodeType: 1,
          NodeShowType: 1,
          NodeIcon: '',
          ControllerName: '',
          ActionName: '',
          AddButton: false
        };
        if (data) {
          Object.assign(form, data);
          if (form.ParentID <= 0) {
            delete form.ParentID
          }
          form.NodeType = Number(form.NodeType)
          form.NodeShowType = Number(form.NodeShowType)
        }
        return form;
      },
    }
  }
</script>

<style scoped>
  .col-box {
    height: 50px;
  }
</style>
